<div class="loading-error-container">
  <!-- Error State -->
  <div *ngIf="error" class="empty-state error-state">
    <div class="flex flex-column align-items-center gap-3">
      <i class="pi pi-exclamation-circle error-icon"></i>
      <div class="state-title">{{ noConnectionMessage }}</div>
      <p>{{ reloadSuggestion }}</p>
    </div>
  </div>

  <!-- Loading State -->
  <div *ngIf="loading && !error" class="empty-state loading-state">
    <div class="flex flex-column align-items-center gap-3">
      <div class="state-title">{{ loadingMessage }}</div>
      <p-progressSpinner
        styleClass="w-3rem h-3rem"
        strokeWidth="4"
        fill="var(--surface-ground)"
        animationDuration=".5s"
      ></p-progressSpinner>
    </div>
  </div>
</div>
